<template>
	<div class="mainbody">
		<dt-location :data="[{title:'系统用户'},{title:'管理日志'}]"></dt-location>
		<dt-toolbar-box>
			<template #default>
				<div class="list-box">
					<div class="l-list">
						<el-button-group>
							<el-button icon="Delete" @click="deleteCheckAll">删除</el-button>
						</el-button-group>
					</div>
					<div class="r-list">
						<div class="search-box">
							<el-input placeholder="输入关健字" v-model="datas.keyword" @clear="initData" @keyup.enter.native="initData" clearable>
								<template #append>
									<el-button icon="Search" @click="initData"></el-button>
								</template>
							</el-input>
						</div>
					</div>
				</div>
			</template>
		</dt-toolbar-box>
		
		<div class="content-box">
			<el-card class="table-card">
				<el-table ref="tableRef" v-loading="datas.loading" :data="datas.listData" stripe class="table-list">
					<el-table-column prop="userName" label="用户名" width="110"></el-table-column>
					<el-table-column prop="method" label="方法" width="100">
						<template #default="scope">
							<el-tag size="small" effect="dark">{{scope.row.method}}</el-tag>
						</template>
					</el-table-column>
					<el-table-column prop="path" label="请求路径" min-width="160">
						<template #default="scope">
							<span>{{scope.row.path}}</span>
							<span v-if="scope.row.query">{{scope.row.query}}</span>
						</template>
					</el-table-column>
					<el-table-column label="状态" width="100">
						<template #default="scope">
							<el-tag size="small" type="success" effect="dark" v-if="scope.row.statusCode==200||scope.row.statusCode==204">成功</el-tag>
							<el-tag size="small" type="danger" effect="dark" v-else>失败</el-tag>
						</template>
					</el-table-column>
					<el-table-column prop="addTime" fixed="right" label="操作时间" width="160"></el-table-column>
				</el-table>
			</el-card>
			
			<div class="pager-box">
				<el-pagination background
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page="datas.pageIndex"
					:page-sizes="[10, 20, 50, 100]"
					:page-size="datas.pageSize"
					layout="total, sizes, prev, pager, next, jumper"
					:total="datas.totalCount">
				</el-pagination>
			</div>
		</div>
	</div>
</template>

<script setup>
	import { ref,reactive,getCurrentInstance } from "vue"
	import DtToolbarBox from '../../../components/layout/DtToolbarBox.vue'
	
	//获取全局属性
	const { proxy } = getCurrentInstance()
	const tableRef = ref(null)
	
	//定义属性
	const datas = reactive({
		loading: false,
		keyword: '',
		totalCount: 0,
		pageSize: 10,
		pageIndex: 1,
		listData: [],
	})
	
	//初始化数据
	const initData = async() => {
		let sendUrl = `/admin/manager/log?pageSize=${datas.pageSize}&pageIndex=${datas.pageIndex}`
		if (datas.keyword.length > 0) {
			sendUrl += `&keyword=${encodeURI(datas.keyword)}`
		}
		//获取分页列表
		await proxy.$api.request({
			url: sendUrl,
			beforeSend() {
				datas.loading = true
			},
			success(res) {
				datas.listData = res.data;
				let pageInfo = JSON.parse(res.headers["x-pagination"])
				datas.totalCount = pageInfo.totalCount
				datas.pageSize = pageInfo.pageSize
				datas.pageIndex = pageInfo.pageIndex
			},
			error(err) {
				datas.listData = []
			},
			complete() {
				datas.loading = false
			}
		})
	}
	//删除
	const deleteCheckAll = () => {
		//执行删除操作
		proxy.$confirm('确认要删除7天前日志吗？', '提示', {
			confirmButtonText: '确定',
			cancelButtonText: '取消',
			type: 'warning'
		}).then(() => {
			proxy.$api.request({
				method: 'delete',
				url: `/admin/manager/log`,
				loading: true,
				successMsg: '已删除成功',
				success(res) {
					initData() //重新加载列表
				}
			})
		}).catch(() => { })
	}
	//每页显示数量
	const handleSizeChange = (val) => {
		if (datas.pageSize != val) {
			datas.pageSize = val
			initData()
		}
	}
	//跳转到第几页
	const handleCurrentChange = (val) => {
		if (datas.pageIndex != val) {
			datas.pageIndex = val
			initData()
		}
	}
	
	//执行初始化方法
	initData()
</script>